<include file="Public:header" />
<include file="Public:leftside" />
<link rel="stylesheet" type="text/css" href="/Store/css/cuoxiao.css"/>
<link rel="stylesheet" type="text/css" href="/Store/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="/Store/css/jquery-ui-private.css">
<style type="text/css">
	.breadcrumb{margin: 0;}
</style>
<script>
var platform_shopname= '58代言';
</script>
<script type="text/javascript" src="/Store/js/jquery-ui-private.js" charset="utf-8"></script>


<div id="dialog"></div>
<div class="main-content">
	<div class="breadcrumbs breadcrumbs-fixed" id="breadcrumbs">
		<ul class="breadcrumb">
			<li> <i class="icon-home home-icon"></i>
				<a href="#">首页</a>
			</li>
			<li>
				<a href="{:U('Store/goodsRecommendClass')}">促销板块</a>
			</li>

		</ul>
	</div>
	<div class="page-content" style="padding: 0;border: none;position: relative;overflow: hidden;">
			<div class="tabmenu">
				<ul class="tab pngFix">
					<li class="active"><a href="{:U('Store/goodsRecommendClass')}">促销版块</a></li>
				</ul>
				<div class="right_side_operation">
					<ul>
						<li>
							<a class="nscs-table-handle_green" href="javascript:void(0);" onclick="addBlock()">
								<i class="fa fa-plus-circle"></i>&nbsp;添加促销版块
							</a>
						</li> 

					</ul>
				</div>
			</div>
			<hr class="tabmenu_hr" style="border:1px solid #00C0FF;margin:0 0px 10px 20px;">
			<div style="margin-left: 20px;">
			 <div class="mb10 mlr15">
			       <div class="tiphelp-info"><strong>提示：</strong>设置促销版块，设置方法如下：<br>
			                点击“添加促销版块”按钮，在出现的下方列表中点击“编辑”按钮，按照要求输入相应内容，点击“保存”按钮，如果想要取消，点击“关闭”按钮即可，添加成功后会在前台首页轮播图下方显示所添加的版块内容。同时也可以进行删除操作。
			       </div>
			 </div>
			 
			 
			 <div class="goodsRecommend">

				<notempty name="goods_recommend_class">
				<form class="" id="block_list">		
					<foreach name="goods_recommend_class" item="v">		
			             <header class="panel-heading">
			             	{$v['class_name']} 
			             	<a href="javascript:void(0);" onclick="delGoodsRecommendClass({$v['id']},this)" class="handle"><i class="fa fa-trash-o"></i>&nbsp; 删除 </a>   	
			               	<a href="javascript:void(0);" onclick="updateGoodsRecommendClass({$v['id']})" class="handle" style="background:#01B044;"><i class="fa fa-cog"></i>&nbsp; 编辑 </a>       	    	
			             </header>
			             <div class="goods-logo-class">
			             	<ul>
			             		<notempty name="v['shop_list']">
			                    	<foreach name="v['shop_list']" item="vg">
			             			<li >
			             				<img class="imglogo" src="{$vg['image']}" alt="{$vg['title']}" title="{$vg['title']}"  style="border:1px dashed #e9e9e9;text-align:center;">
			             			</li>
			             		</foreach>
			                    <else />
			                    	<li>暂未选择商品</li>
			                   	</notempty>
			             	</ul>
			             </div>          
			          </foreach>
				</form>
				<else />
			  	<div class="tip-box">
			  		当前系统还未设置促销板块，<a href="javascript:void(0);" onclick="addBlock()">马上设置</a>
			  	</div>
			   </notempty>
			</div>
			
			<div class="goodsRecommend" id="add-goodsRecommend"></div>
			
			<div class="modal fade hide1" id="data" style="width:800px;height: 560px;">
			    <div class="modal-dialog" style="padding: 0;">
			        <div class="modal-content" style="width:800px;height: 560px;">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title">促销商品推荐</h4>
			            </div>
			            <div class="modal-body" style="max-height: 438px;overflow:auto;">
			            	<div class="set-style">
			            		<dl>
									<dt><span class="color-red">*</span>模块名称</dt>
									<dd>
										<input type="hidden" class="form-control" id="class_id" value="">
										<input type="text" class="form-control" id="class_name" value="" placeholder="请输入模块名称">
										<span class="error">请输入模块名称</span>
									</dd>
								</dl>
								<dl>
									<dt>排序</dt>
									<dd>
										<input type="text" class="form-control" id="sort" value="" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="排序">
									</dd>
								</dl>
								<dl>
									<dt>已选商品</dt>
									<dd>
									<div class="info" >
					                  	<button type="button" class="close" data-dismiss="alert" style="margin-top:4px;">×</button>
					                  	<p>单击查询的商品选中，双击已选择的可以删除，最多5个,保存后生效。</p>
					                </div>
					                </dd>
					                <dt></dt>
					                <dd>
					                	<div id="goods_list">
					                		
					                	</div>
					                </dd>
								</dl>
								<dl>
									<dt>选择要促销的商品:</dt>
									<dd></dd>
									<dt>选择分类</dt>	
									<dd>
			
										
										<select name="account" class="form-control m-b category_first" id="category_first_id"  style="width:145px;height:34px;">
											<option value="0">商品分类一级</option>
											<volist name="category_list_1" id="vc1">
												<option value="{$vc1['id']}">{$vc1['name']}</option>
											</volist>
										</select>
													
									</dd>
									<dt>商品名称</dt>	
									<dd>
										<input type="text" class="form-control" id="search_info" value="" placeholder="请输入商品名称">				
										<button type="button" class="btn btn-info"  onclick="search_goods()" style="display:inline-block;">搜索</button>
									</dd>
								</dl>
								<dl>
									<dt></dt>
									<dd id="search_goods_list">
									
									</dd>
								</dl>
			            	</div>
			            </div>
			            <div class="modal-footer">
			            	<button type="button" class="btn btn-info" onclick="save()" style="display:inline-block;">保存</button>
			                <button type="button" class="btn btn-default" data-dismiss="modal" style="display:inline-block;">关闭</button>                
			            </div>
			        </div>
			    </div>
			</div>
		</div>
		
	</div>
</div>
<script type="text/javascript">
	/*
 * 添加促销版块
 */
function addBlock(){
	$(".tip-box").hide();
	$("#class_id").val(null);
	var num = $("#add-goodsRecommend").prev().find(".panel-heading").length;
	if(num >4){
		showMessage('error','模块最多只能添加5个！');
	}else{
		var html = '';
		html += '<div class="goodsRecommend" id="recommendAdd">';
		html += '<header class="panel-heading">促销商品推荐 <a href="javascript:void(0);" onclick="delGoodsRecommendClass(0,this)" class="handle"><i class="fa fa-trash-o"></i>&nbsp; 删除 </a>';
		html += '<a href="javascript:void(0);" data-toggle="data" onclick="updateGoodsRecommendClass(0)" class="handle" style="background:#01B044;"><i class="fa fa-cog"></i>&nbsp; 编辑 </a></header>';
		html += '<table class="table table-striped m-b-none text-sm"><tbody align="center">';
		html += '<tr>';
		html += '</tr></table></div>';
		$("#add-goodsRecommend").html(html);
	}
	
	
}

/*
 * 编辑促销版块
 */
function updateGoodsRecommendClass(class_id){
	$("#data").modal("show");
	if(class_id > 0){
		$.ajax({
			type : 'post',
			url : '{:U("store/getgoodsrecommendclass")}',
			data : {'class_id' : class_id},
			async : true,
			success : function(data){
				$("#class_name").val(data['class_name']);
				$("#sort").val(data['sort']);
				$("#class_id").val(data['id']);	
				goods_list_html = "";
	    		for(var i=0;i<data['shop_list'].length;i++){
					goods_list_html += '<div class="alert-goods-info" onDblClick="remove_selected_goods(this)">';
					goods_list_html += '<button type="button" class="close" data-dismiss="alert" style="color:#555;">×</button>';
					goods_list_html += '<input type="checkbox" name="selected_goods" value="'+data['shop_list'][i]['id']+'" style="display:none;">';
					goods_list_html += '<img class="imglogo" src="'+data['shop_list'][i]['image']+'" width="60" height="60">';
					goods_list_html += '<label  class="goods-name" title="'+data['shop_list'][i]['title']+'">'+data['shop_list'][i]['title']+'</label>';
					goods_list_html += '</div>';
					$('#goods_list').html(goods_list_html);
				}
	    		console.log(goods_list_html);
			}
		})
	}else{
		$("#class_name").val('');
		$("#sort").val('');
		$("#class_id").val('');	
		$('#goods_list .alert-goods-info').remove();
	}
}
/*
 * 搜索商品
 */
function search_goods(){
	var goods_name = $("#search_info").val();
	var category_id = $("#category_first_id").val();
	var category_level = 1;
	$.ajax({
		type : 'post',
		url : '{:U("Store/searchgoods")}',
		data : {'goods_name':goods_name,'category_id':category_id, 'category_level':category_level},
		async : true,
		success : function(data){
			var html = '';
			if(data!=null){
				if(data.length > 0){
					for(var i=0;i<data.length;i++){
						html += '<div class="search-goods-info" >';
						html += '<input type="checkbox" name="select_goods" value="'+data[i]['id']+'" style="display:none;">';
						html += '<img class="imglogo" src="'+data[i]['image']+'"  onclick="addSelectGoods(this)" width="70" height="70">';
						html += '<label class="goods-name" title="'+data[i]['title']+'">'+data[i]['title']+'</label>';
						html += '</div>';
					}
				}else{
					html += '<div class="col-sm-12"><p>暂无商品</p></div>';
				}
			}else{
				html += '<div class="col-sm-12"><p>暂无商品</p></div>';
			}
			
			
			$("#search_goods_list").html(html);
		}
	})
}
/*
 * 向板块中添加商品
 */
function addSelectGoods(event){
	var goods_id_obj = $("#goods_list").find('input[name="selected_goods"]');
	var goods_id_str = '';
	for(var i=0; i<goods_id_obj.length; i++){ 
		goods_id_str += ','+goods_id_obj[i].value; //如果选中，将value添加到变量s中 
	} 
	var goods_id = $(event).parent('.search-goods-info').children('input[name="select_goods"]').val();
	var goods_url = $(event).attr("src");
	var goods_name = $(event).parent('.search-goods-info').children('label').html();
	//判断添加商品的个数
	var goods_list_obj = $("#goods_list").find('input[name="selected_goods"]');
	if(goods_list_obj.length<5){
		
	}else{
		return false;
	}
	if(goods_id_str.indexOf(goods_id) > 0){
		return false;
	}else{
		var html = '';
		html += '<div class="alert-goods-info" onDblClick="remove_selected_goods(this)">';
		html += '<button type="button" class="close" data-dismiss="alert" style="color:#555;">×</button>';
		html += '<input type="checkbox" name="selected_goods" value="'+goods_id+'" style="display:none;">';
		html += '<img class="imglogo" src="'+goods_url+'" width="60" height="60">';
		html += '<label  class="goods-name" title="'+goods_name+'">'+goods_name+'</label>';
		html += '</div>';
		$("#goods_list").append(html);
	}
}

/*
 * 保存促销版块
 */
 function save(){
	var class_id = $("#class_id").val();
	var class_name = $("#class_name").val();
	//alert(class_name.length);
	var sort = $("#sort").val();
	var goods_id_obj = $("#goods_list").find('input[name="selected_goods"]');
	var goods_id_str = '';
	for(var i=0; i<goods_id_obj.length; i++){ 
		goods_id_str += ','+goods_id_obj[i].value; //如果选中，将value添加到变量s中 
	} 
	goods_id_str = goods_id_str.substr(1);
	if(class_name == ''){
		
		layer.alert('模块名称不能为空！');
		$("#class_name").focus();
		return false;
	}
	if(class_name.length>4){
		layer.alert('促销模块名称不能超过4个字！');
	
		$("#class_name").focus();
		return false;
	}
	$.ajax({
		type: 'post',
		url: '{:U("store/savegoodsrecommendclass")}',
		data: {'class_id':class_id,'class_name':class_name,'goods_id_str':goods_id_str,'sort':sort},
		async: true,
		success:function(data){
			$("#data").modal("hide");
			layer.alert(data['message']);
			location.reload();
		}
	});
}
 /**
  * 删除 促销版块
  */
 function delGoodsRecommendClass(class_id,e){
 	if(class_id > 0){
 		$( "#dialog" ).dialog({
 	        buttons: {
 	            "确定": function() {
 	                $(this).dialog('close');
 	                $.ajax({
 	    				type:"post",
 	    				url:"{:U("store/delgoodsrecommendclass")}",
 	    				data:{'class_id':class_id},
 	    				async:true,
 	    				success:function (data) {
 	    					layer.alert(data['message']);
 	    					location.reload();

 	    				}
 	    			});
 	            },
 	            "取消,#e57373": function() {
 	                $(this).dialog('close');
 	            }
 	        },
 	        contentText:"确定删除？",
 	    });
 	}else{
 		$(e).parents('#recommendAdd').remove()
 	}
 }
//双击 移除已选择的商品
function remove_selected_goods(event){
	$(event).remove();
}

</script>
	<include file="Public:footer" />